
<div :class="[$store.state.appPrefix + '-p-course-trainee', 'course-layout-content']" data-table-extra="130">  
  <div class="info-header oh g-table-extra">
    学员管理
    <div class="header-actions fr">
      <el-button class="add-btn" size="small" @click="$handleGroup">分组设置</el-button>
      <!-- <el-button class="add-btn" size="small" @click="$handleExamine">申请加入待审核</el-button>       -->
      <el-button class="add-btn" size="small" icon="el-icon-upload" @click="$handleImport">批量导入学员</el-button>
      <el-button class="add-btn" size="small"  icon="el-icon-plus" type="primary" @click="addDialogVisible = true">添加学员</el-button>
    </div>
  </div>
  <div class="g-table-layout">  
    <div class="g-table-top g-table-top-action__flex g-table-top-action__flex--br">
      <div class="g-table-top-action__left">
        <!-- <div class="g-table-main-title">课程列表</div> -->
      </div>
      <div class="g-table-top-action__right">
        <el-search
          size="small"
          v-model="filterForm.q"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          isBasic
          @search="$search"
          @clear="() => {filterForm.q = ''; $search()}"
          placeholder="请输入学员名称">
        </el-search>
        <el-select
          size="small"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="filterForm.groupId"
          placeholder="选择学员分组"
          clearable
          @change="$search">
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.groupName"
            :value="item.id">
          </el-option>
        </el-select>
        <!-- <el-button type="primary" icon="el-icon-plus" @click="$handleAdd">新增</el-button> -->
      </div>
    </div>
    <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList" @sort-change="$sortChange">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        v-for="col in COL_INDEXS"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :sortable="col.isSort ? 'custom' : false"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span v-if="col.isDict">
            <el-tag size="mini" :type="(col.dictType[scope.row[col.prop]] || {}).tag">{{(col.dictType[scope.row[col.prop]] || {}).codeName | filterBlank}}</el-tag>
          </span>
          <div class="bar-progress" v-else-if="col.isBar">
            <div class="progress-inner">
              <el-progress v-if="scope.row[col.prop] < 100" :percentage="scope.row[col.prop]" :format="barFormat" :show-text="false"></el-progress>
              <el-progress v-else :percentage="scope.row[col.prop]" status="success" :show-text="false"></el-progress>
            </div>
            {{parseInt(scope.row.totalLessonNum, 10) - parseInt(scope.row.unfinishLessonNum, 10) || 0}}/{{scope.row.totalLessonNum || 0}}
          </div>
          <span v-else-if="col.isExtra">
            <div>{{scope.row[col.prop]}}</div>
            <p class="s">加入时间：{{scope.row.joinTime | filterBlank}}</p>
            <p class="s">{{scope.row.groupName | filterBlank}}</p>
          </span>
          <span v-else-if="col.unit">{{(col.unit === '%' ? Number(scope.row[col.prop]) : scope.row[col.prop]) | filterBlank}}{{col.unit && col.unit}}</span>
          <span v-else>{{scope.row[col.prop] | filterBlank}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        :width="200"
        class-name="no-ellipsis">
        <template slot-scope="scope">
          <div class="btns">
            <el-button type="text" size="medium" @click="$handleRecord(scope.row)">学习记录</el-button>
            <el-button type="text" size="medium" @click="$handleDelete(scope.row)">移除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
  <add-trainee :dialogVisible.sync="addDialogVisible" :courseId="courseId" @saveSucc="$addSuccess"></add-trainee>
</div>
